<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Dashboard - NiceAdmin Bootstrap Template</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link th:href="@{/libs/niceadmin/assets/img/favicon.png}" rel="icon">
    <link th:href="@{/libs/niceadmin/assets/img/apple-touch-icon.png}" rel="apple-touch-icon">

    <!-- Google Fonts -->



    <!-- Vendor CSS Files -->
    <link th:href="@{/libs/niceadmin/assets/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/libs/niceadmin/assets/vendor/bootstrap-icons/bootstrap-icons.css}" rel="stylesheet">
    <link th:href="@{/libs/niceadmin/assets/vendor/boxicons/css/boxicons.min.css}" rel="stylesheet">
    <link th:href="@{/libs/niceadmin/assets/vendor/quill/quill.snow.css}" rel="stylesheet">
    <link th:href="@{/libs/niceadmin/assets/vendor/quill/quill.bubble.css}" rel="stylesheet">
    <link th:href="@{/libs/niceadmin/assets/vendor/remixicon/remixicon.css}" rel="stylesheet">
    <link th:href="@{/libs/niceadmin/assets/vendor/simple-datatables/style.css}" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link th:href="@{/libs/niceadmin/assets/css/style.css}" rel="stylesheet">

    <!-- =======================================================
  * Template Name: NiceAdmin - v2.2.2
  
  
  
  ======================================================== -->
</head>

<body>

    <!-- ======= Header ======= -->
    <header id="header" class="header fixed-top d-flex align-items-center" th:fragment="header">

        <div class="d-flex align-items-center justify-content-between">
            <a th:href="@{/libs/niceadmin/index.html}" class="logo d-flex align-items-center">
                <img th:src="@{/libs/niceadmin/assets/img/logo.png}" alt="">
                <span class="d-none d-lg-block">宋帅兵</span>
            </a>
            <i class="bi bi-list toggle-sidebar-btn"></i>
        </div><!-- End Logo -->

        <div class="search-bar">
            <form class="search-form d-flex align-items-center" method="POST" action="#">
                <input type="text" name="query" placeholder="请输入关键字" title="Enter search keyword">
                <button type="submit" title="Search"><i class="bi bi-search"></i></button>
            </form>
        </div><!-- End Search Bar -->

        <nav class="header-nav ms-auto">
            <ul class="d-flex align-items-center">

                <li class="nav-item d-block d-lg-none">
                    <a class="nav-link nav-icon search-bar-toggle " th:href="@{/libs/niceadmin/#}">
                        <i class="bi bi-search"></i>
                    </a>
                </li><!-- End Search Icon-->

                <li class="nav-item dropdown">

                    <a class="nav-link nav-icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown">
                        <i class="bi bi-bell"></i>
                        <span class="badge bg-primary badge-number">4</span>
                    </a><!-- End Notification Icon -->

                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications">
                        <li class="dropdown-header">
                            You have 4 new notifications
                            <a th:href="@{/libs/niceadmin/#}"><span class="badge rounded-pill bg-primary p-2 ms-2">View
                                    all</span></a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="notification-item">
                            <i class="bi bi-exclamation-circle text-warning"></i>
                            <div>
                                <h4>Lorem Ipsum</h4>
                                <p>Quae dolorem earum veritatis oditseno</p>
                                <p>30 min. ago</p>
                            </div>
                        </li>

                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="notification-item">
                            <i class="bi bi-x-circle text-danger"></i>
                            <div>
                                <h4>Atque rerum nesciunt</h4>
                                <p>Quae dolorem earum veritatis oditseno</p>
                                <p>1 hr. ago</p>
                            </div>
                        </li>

                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="notification-item">
                            <i class="bi bi-check-circle text-success"></i>
                            <div>
                                <h4>Sit rerum fuga</h4>
                                <p>Quae dolorem earum veritatis oditseno</p>
                                <p>2 hrs. ago</p>
                            </div>
                        </li>

                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="notification-item">
                            <i class="bi bi-info-circle text-primary"></i>
                            <div>
                                <h4>Dicta reprehenderit</h4>
                                <p>Quae dolorem earum veritatis oditseno</p>
                                <p>4 hrs. ago</p>
                            </div>
                        </li>

                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li class="dropdown-footer">
                            <a th:href="@{/libs/niceadmin/#}">Show all notifications</a>
                        </li>

                    </ul><!-- End Notification Dropdown Items -->

                </li><!-- End Notification Nav -->

                <li class="nav-item dropdown">

                    <a class="nav-link nav-icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown">
                        <i class="bi bi-chat-left-text"></i>
                        <span class="badge bg-success badge-number">3</span>
                    </a><!-- End Messages Icon -->

                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow messages">
                        <li class="dropdown-header">
                            You have 3 new messages
                            <a th:href="@{/libs/niceadmin/#}"><span class="badge rounded-pill bg-primary p-2 ms-2">View
                                    all</span></a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="message-item">
                            <a th:href="@{/libs/niceadmin/#}">
                                <img th:src="@{/libs/niceadmin/assets/img/messages-1.jpg}" alt=""
                                    class="rounded-circle">
                                <div>
                                    <h4>Maria Hudson</h4>
                                    <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                                    <p>4 hrs. ago</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="message-item">
                            <a th:href="@{/libs/niceadmin/#}">
                                <img th:src="@{/libs/niceadmin/assets/img/messages-2.jpg}" alt=""
                                    class="rounded-circle">
                                <div>
                                    <h4>Anna Nelson</h4>
                                    <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                                    <p>6 hrs. ago</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="message-item">
                            <a th:href="@{/libs/niceadmin/#}">
                                <img th:src="@{/libs/niceadmin/assets/img/messages-3.jpg}" alt=""
                                    class="rounded-circle">
                                <div>
                                    <h4>David Muldon</h4>
                                    <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                                    <p>8 hrs. ago</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="dropdown-footer">
                            <a th:href="@{/libs/niceadmin/#}">Show all messages</a>
                        </li>

                    </ul><!-- End Messages Dropdown Items -->

                </li><!-- End Messages Nav -->

                <li class="nav-item dropdown pe-3">

                    <a class="nav-link nav-profile d-flex align-items-center pe-0" th:href="@{/libs/niceadmin/#}"
                        data-bs-toggle="dropdown">
                        <img th:src="@{/libs/niceadmin/assets/img/profile-img.jpg}" alt="Profile"
                            class="rounded-circle">
                        <span class="d-none d-md-block dropdown-toggle ps-2">宋帅兵. Anderson</span>
                    </a><!-- End Profile Iamge Icon -->

                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
                        <li class="dropdown-header">
                            <h6>Kevin Anderson</h6>
                            <span>Web Designer</span>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li>
                            <a class="dropdown-item d-flex align-items-center"
                                th:href="@{/libs/niceadmin/users-profile.html}">
                                <i class="bi bi-person"></i>
                                <span>My Profile</span>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li>
                            <a class="dropdown-item d-flex align-items-center"
                                th:href="@{/libs/niceadmin/users-profile.html}">
                                <i class="bi bi-gear"></i>
                                <span>Account Settings</span>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li>
                            <a class="dropdown-item d-flex align-items-center"
                                th:href="@{/libs/niceadmin/pages-faq.html}">
                                <i class="bi bi-question-circle"></i>
                                <span>Need Help?</span>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li>
                            <a class="dropdown-item d-flex align-items-center" th:href="@{/Logon/loginout/#}">
                                <i class="bi bi-box-arrow-right"></i>
                                <span>退出登录</span>
                            </a>
                        </li>

                    </ul><!-- End Profile Dropdown Items -->
                </li><!-- End Profile Nav -->

            </ul>
        </nav><!-- End Icons Navigation -->

    </header><!-- End Header -->

    <!-- ======= Sidebar ======= -->
    <aside id="sidebar" class="sidebar" th:fragment="aside">

        <ul class="sidebar-nav" id="sidebar-nav">

            
             <li class="nav-item"> <!-- 员工管理 BEGIN -->
        <a class="nav-link collapsed" data-bs-target="#staff-nav" data-bs-toggle="collapse" th:href="@{/grade/#}">
          <i class="bi bi-menu-button-wide"></i><span>员工管理</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="staff-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a th:href="@{/yuangongmainpage}">
              <i class="bi person-lines-fill"></i><span>员工信息管理</span>
            </a>
          </li>
        </ul>
      </li><!-- 员工管理 End-->
      
       <li class="nav-item"> <!-- 学生管理 BEGIN -->
        <a class="nav-link collapsed" data-bs-target="#student-nav" data-bs-toggle="collapse" th:href="@{/grade/#}">
          <i class="bi bi-menu-button-wide"></i><span>学生管理</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="student-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a th:href="@{/Student/stumianpage}">
              <i class="bi person-lines-fill"></i><span>学生信息管理</span>
            </a>
          </li>
          
        </ul>
      </li><!-- 学生管理 End-->


 <li class="nav-item"> <!-- 教室管理 BEGIN -->
        <a class="nav-link collapsed" data-bs-target="#classroom-nav" data-bs-toggle="collapse" th:href="@{/grade/#}">
          <i class="bi bi-menu-button-wide"></i><span>教室管理</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="classroom-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a th:href="@{/classroom/mainpage}">
              <i class="bi person-lines-fill"></i><span>教室信息管理</span>
            </a>
          </li>
          
        </ul>
      </li><!-- 教室管理 End-->


      
       <li class="nav-item"> <!-- 班级管理 BEGIN -->
        <a class="nav-link collapsed" data-bs-target="#grade-nav" data-bs-toggle="collapse" th:href="@{/grade/#}">
          <i class="bi bi-menu-button-wide"></i><span>班级管理</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="grade-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a th:href="@{/grade/cha}">
              <i class="bi person-lines-fill"></i><span>班级信息管理</span>
            </a>
          </li>
          
        </ul>
      </li><!-- End 班级管理-->
      
      
      <li class="nav-item"> <!-- 宿舍管理 BEGIN -->
        <a class="nav-link collapsed" data-bs-target="#dormitory-nav" data-bs-toggle="collapse" th:href="@{/grade/#}">
          <i class="bi bi-menu-button-wide"></i><span>宿舍管理</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="dormitory-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a th:href="@{/ss/cha}">
              <i class="bi person-lines-fill"></i><span>宿舍信息管理</span>
            </a>
          </li>
         
        </ul>
      </li><!-- End  宿舍管理-->
      
      <li class="nav-item"> <!-- 形状图 BEGIN -->
        <a class="nav-link collapsed" data-bs-target="#xzt-nav" data-bs-toggle="collapse" th:href="@{/grade/#}">
          <i class="bi bi-menu-button-wide"></i><span>形状图</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="dormitory-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a th:href="@{/Apache/apache}">
              <i class="bi person-lines-fill"></i><span>形状图</span>
            </a>
          </li>
         
        </ul>
      </li>


        </ul>

    </aside><!-- End Sidebar-->

    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Dashboard</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a th:href="@{/libs/niceadmin/index.html}">Home</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section dashboard">
            <div class="row">

                <!-- Left side columns -->
                <div class="col-lg-8">
                    <div class="row">

                        <!-- Sales Card -->
                        <div class="col-xxl-4 col-md-6">
                            <div class="card info-card sales-card">

                                <div class="filter">
                                    <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                        <li class="dropdown-header text-start">
                                            <h6>Filter</h6>
                                        </li>

                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                                    </ul>
                                </div>

                                <div class="card-body">
                                    <h5 class="card-title">Sales <span>| Today</span></h5>

                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-cart"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>145</h6>
                                            <span class="text-success small pt-1 fw-bold">12%</span> <span
                                                class="text-muted small pt-2 ps-1">increase</span>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div><!-- End Sales Card -->

                        <!-- Revenue Card -->
                        <div class="col-xxl-4 col-md-6">
                            <div class="card info-card revenue-card">

                                <div class="filter">
                                    <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                        <li class="dropdown-header text-start">
                                            <h6>Filter</h6>
                                        </li>

                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                                    </ul>
                                </div>

                                <div class="card-body">
                                    <h5 class="card-title">Revenue <span>| This Month</span></h5>

                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-currency-dollar"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>$3,264</h6>
                                            <span class="text-success small pt-1 fw-bold">8%</span> <span
                                                class="text-muted small pt-2 ps-1">increase</span>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div><!-- End Revenue Card -->

                        <!-- Customers Card -->
                        <div class="col-xxl-4 col-xl-12">

                            <div class="card info-card customers-card">

                                <div class="filter">
                                    <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                        <li class="dropdown-header text-start">
                                            <h6>Filter</h6>
                                        </li>

                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                                    </ul>
                                </div>

                                <div class="card-body">
                                    <h5 class="card-title">Customers <span>| This Year</span></h5>

                                    <div class="d-flex align-items-center">
                                        <div
                                            class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="bi bi-people"></i>
                                        </div>
                                        <div class="ps-3">
                                            <h6>1244</h6>
                                            <span class="text-danger small pt-1 fw-bold">12%</span> <span
                                                class="text-muted small pt-2 ps-1">decrease</span>

                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div><!-- End Customers Card -->

                        <!-- Reports -->
                        <div class="col-12">
                            <div class="card">

                                <div class="filter">
                                    <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                        <li class="dropdown-header text-start">
                                            <h6>Filter</h6>
                                        </li>

                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                                    </ul>
                                </div>

                                <div class="card-body">
                                    <h5 class="card-title">Reports <span>/Today</span></h5>

                                    <!-- Line Chart -->
                                    <div id="reportsChart"></div>

                                    <script>
                                        document.addEventListener("DOMContentLoaded", () => {
                                            new ApexCharts(document.querySelector("#reportsChart"), {
                                                series: [{
                                                    name: 'Sales',
                                                    data: [31, 40, 28, 51, 42, 82, 56],
                                                }, {
                                                    name: 'Revenue',
                                                    data: [11, 32, 45, 32, 34, 52, 41]
                                                }, {
                                                    name: 'Customers',
                                                    data: [15, 11, 32, 18, 9, 24, 11]
                                                }],
                                                chart: {
                                                    height: 350,
                                                    type: 'area',
                                                    toolbar: {
                                                        show: false
                                                    },
                                                },
                                                markers: {
                                                    size: 4
                                                },
                                                colors: ['#4154f1', '#2eca6a', '#ff771d'],
                                                fill: {
                                                    type: "gradient",
                                                    gradient: {
                                                        shadeIntensity: 1,
                                                        opacityFrom: 0.3,
                                                        opacityTo: 0.4,
                                                        stops: [0, 90, 100]
                                                    }
                                                },
                                                dataLabels: {
                                                    enabled: false
                                                },
                                                stroke: {
                                                    curve: 'smooth',
                                                    width: 2
                                                },
                                                xaxis: {
                                                    type: 'datetime',
                                                    categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
                                                },
                                                tooltip: {
                                                    x: {
                                                        format: 'dd/MM/yy HH:mm'
                                                    },
                                                }
                                            }).render();
                                        });
                                    </script>
                                    <!-- End Line Chart -->

                                </div>

                            </div>
                        </div><!-- End Reports -->

                        <!-- Recent Sales -->
                        <div class="col-12">
                            <div class="card recent-sales overflow-auto">

                                <div class="filter">
                                    <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                        <li class="dropdown-header text-start">
                                            <h6>Filter</h6>
                                        </li>

                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                                    </ul>
                                </div>

                                <div class="card-body">
                                    <h5 class="card-title">Recent Sales <span>| Today</span></h5>

                                    <table class="table table-borderless datatable">
                                        <thead>
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Customer</th>
                                                <th scope="col">Product</th>
                                                <th scope="col">Price</th>
                                                <th scope="col">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}">#2457</a></th>
                                                <td>Brandon Jacob</td>
                                                <td><a th:href="@{/libs/niceadmin/#}" class="text-primary">At
                                                        praesentium minu</a></td>
                                                <td>$64</td>
                                                <td><span class="badge bg-success">Approved</span></td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}">#2147</a></th>
                                                <td>Bridie Kessler</td>
                                                <td><a th:href="@{/libs/niceadmin/#}" class="text-primary">Blanditiis
                                                        dolor omnis similique</a></td>
                                                <td>$47</td>
                                                <td><span class="badge bg-warning">Pending</span></td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}">#2049</a></th>
                                                <td>Ashleigh Langosh</td>
                                                <td><a th:href="@{/libs/niceadmin/#}" class="text-primary">At recusandae
                                                        consectetur</a></td>
                                                <td>$147</td>
                                                <td><span class="badge bg-success">Approved</span></td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}">#2644</a></th>
                                                <td>Angus Grady</td>
                                                <td><a th:href="@{/libs/niceadmin/#}" class="text-primar">Ut voluptatem
                                                        id earum et</a></td>
                                                <td>$67</td>
                                                <td><span class="badge bg-danger">Rejected</span></td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}">#2644</a></th>
                                                <td>Raheem Lehner</td>
                                                <td><a th:href="@{/libs/niceadmin/#}" class="text-primary">Sunt
                                                        similique distinctio</a></td>
                                                <td>$165</td>
                                                <td><span class="badge bg-success">Approved</span></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>

                            </div>
                        </div><!-- End Recent Sales -->

                        <!-- Top Selling -->
                        <div class="col-12">
                            <div class="card top-selling overflow-auto">

                                <div class="filter">
                                    <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                            class="bi bi-three-dots"></i></a>
                                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                        <li class="dropdown-header text-start">
                                            <h6>Filter</h6>
                                        </li>

                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                        <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                                    </ul>
                                </div>

                                <div class="card-body pb-0">
                                    <h5 class="card-title">Top Selling <span>| Today</span></h5>

                                    <table class="table table-borderless">
                                        <thead>
                                            <tr>
                                                <th scope="col">Preview</th>
                                                <th scope="col">Product</th>
                                                <th scope="col">Price</th>
                                                <th scope="col">Sold</th>
                                                <th scope="col">Revenue</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}"><img
                                                            th:src="@{/libs/niceadmin/assets/img/product-1.jpg}"
                                                            alt=""></a></th>
                                                <td><a th:href="@{/libs/niceadmin/#}" class="text-primary fw-bold">Ut
                                                        inventore ipsa voluptas nulla</a></td>
                                                <td>$64</td>
                                                <td class="fw-bold">124</td>
                                                <td>$5,828</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}"><img
                                                            th:src="@{/libs/niceadmin/assets/img/product-2.jpg}"
                                                            alt=""></a></th>
                                                <td><a th:href="@{/libs/niceadmin/#}"
                                                        class="text-primary fw-bold">Exercitationem similique
                                                        doloremque</a></td>
                                                <td>$46</td>
                                                <td class="fw-bold">98</td>
                                                <td>$4,508</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}"><img
                                                            th:src="@{/libs/niceadmin/assets/img/product-3.jpg}"
                                                            alt=""></a></th>
                                                <td><a th:href="@{/libs/niceadmin/#}"
                                                        class="text-primary fw-bold">Doloribus nisi exercitationem</a>
                                                </td>
                                                <td>$59</td>
                                                <td class="fw-bold">74</td>
                                                <td>$4,366</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}"><img
                                                            th:src="@{/libs/niceadmin/assets/img/product-4.jpg}"
                                                            alt=""></a></th>
                                                <td><a th:href="@{/libs/niceadmin/#}"
                                                        class="text-primary fw-bold">Officiis quaerat sint rerum
                                                        error</a></td>
                                                <td>$32</td>
                                                <td class="fw-bold">63</td>
                                                <td>$2,016</td>
                                            </tr>
                                            <tr>
                                                <th scope="row"><a th:href="@{/libs/niceadmin/#}"><img
                                                            th:src="@{/libs/niceadmin/assets/img/product-5.jpg}"
                                                            alt=""></a></th>
                                                <td><a th:href="@{/libs/niceadmin/#}" class="text-primary fw-bold">Sit
                                                        unde debitis delectus repellendus</a></td>
                                                <td>$79</td>
                                                <td class="fw-bold">41</td>
                                                <td>$3,239</td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>

                            </div>
                        </div><!-- End Top Selling -->

                    </div>
                </div><!-- End Left side columns -->

                <!-- Right side columns -->
                <div class="col-lg-4">

                    <!-- Recent Activity -->
                    <div class="card">
                        <div class="filter">
                            <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                    class="bi bi-three-dots"></i></a>
                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                <li class="dropdown-header text-start">
                                    <h6>Filter</h6>
                                </li>

                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                            </ul>
                        </div>

                        <div class="card-body">
                            <h5 class="card-title">Recent Activity <span>| Today</span></h5>

                            <div class="activity">

                                <div class="activity-item d-flex">
                                    <div class="activite-label">32 min</div>
                                    <i class='bi bi-circle-fill activity-badge text-success align-self-start'></i>
                                    <div class="activity-content">
                                        Quia quae rerum <a th:href="@{/libs/niceadmin/#}"
                                            class="fw-bold text-dark">explicabo officiis</a> beatae
                                    </div>
                                </div><!-- End activity item-->

                                <div class="activity-item d-flex">
                                    <div class="activite-label">56 min</div>
                                    <i class='bi bi-circle-fill activity-badge text-danger align-self-start'></i>
                                    <div class="activity-content">
                                        Voluptatem blanditiis blanditiis eveniet
                                    </div>
                                </div><!-- End activity item-->

                                <div class="activity-item d-flex">
                                    <div class="activite-label">2 hrs</div>
                                    <i class='bi bi-circle-fill activity-badge text-primary align-self-start'></i>
                                    <div class="activity-content">
                                        Voluptates corrupti molestias voluptatem
                                    </div>
                                </div><!-- End activity item-->

                                <div class="activity-item d-flex">
                                    <div class="activite-label">1 day</div>
                                    <i class='bi bi-circle-fill activity-badge text-info align-self-start'></i>
                                    <div class="activity-content">
                                        Tempore autem saepe <a th:href="@{/libs/niceadmin/#}"
                                            class="fw-bold text-dark">occaecati voluptatem</a> tempore
                                    </div>
                                </div><!-- End activity item-->

                                <div class="activity-item d-flex">
                                    <div class="activite-label">2 days</div>
                                    <i class='bi bi-circle-fill activity-badge text-warning align-self-start'></i>
                                    <div class="activity-content">
                                        Est sit eum reiciendis exercitationem
                                    </div>
                                </div><!-- End activity item-->

                                <div class="activity-item d-flex">
                                    <div class="activite-label">4 weeks</div>
                                    <i class='bi bi-circle-fill activity-badge text-muted align-self-start'></i>
                                    <div class="activity-content">
                                        Dicta dolorem harum nulla eius. Ut quidem quidem sit quas
                                    </div>
                                </div><!-- End activity item-->

                            </div>

                        </div>
                    </div><!-- End Recent Activity -->

                    <!-- Budget Report -->
                    <div class="card">
                        <div class="filter">
                            <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                    class="bi bi-three-dots"></i></a>
                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                <li class="dropdown-header text-start">
                                    <h6>Filter</h6>
                                </li>

                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                            </ul>
                        </div>

                        <div class="card-body pb-0">
                            <h5 class="card-title">Budget Report <span>| This Month</span></h5>

                            <div id="budgetChart" style="min-height: 400px;" class="echart"></div>

                            <script>
                                document.addEventListener("DOMContentLoaded", () => {
                                    var budgetChart = echarts.init(document.querySelector("#budgetChart")).setOption({
                                        legend: {
                                            data: ['Allocated Budget', 'Actual Spending']
                                        },
                                        radar: {
                                            // shape: 'circle',
                                            indicator: [{
                                                name: 'Sales',
                                                max: 6500
                                            },
                                            {
                                                name: 'Administration',
                                                max: 16000
                                            },
                                            {
                                                name: 'Information Technology',
                                                max: 30000
                                            },
                                            {
                                                name: 'Customer Support',
                                                max: 38000
                                            },
                                            {
                                                name: 'Development',
                                                max: 52000
                                            },
                                            {
                                                name: 'Marketing',
                                                max: 25000
                                            }
                                            ]
                                        },
                                        series: [{
                                            name: 'Budget vs spending',
                                            type: 'radar',
                                            data: [{
                                                value: [4200, 3000, 20000, 35000, 50000, 18000],
                                                name: 'Allocated Budget'
                                            },
                                            {
                                                value: [5000, 14000, 28000, 26000, 42000, 21000],
                                                name: 'Actual Spending'
                                            }
                                            ]
                                        }]
                                    });
                                });
                            </script>

                        </div>
                    </div><!-- End Budget Report -->

                    <!-- Website Traffic -->
                    <div class="card">
                        <div class="filter">
                            <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                    class="bi bi-three-dots"></i></a>
                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                <li class="dropdown-header text-start">
                                    <h6>Filter</h6>
                                </li>

                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                            </ul>
                        </div>

                        <div class="card-body pb-0">
                            <h5 class="card-title">Website Traffic <span>| Today</span></h5>

                            <div id="trafficChart" style="min-height: 400px;" class="echart"></div>

                            <script>
                                document.addEventListener("DOMContentLoaded", () => {
                                    echarts.init(document.querySelector("#trafficChart")).setOption({
                                        tooltip: {
                                            trigger: 'item'
                                        },
                                        legend: {
                                            top: '5%',
                                            left: 'center'
                                        },
                                        series: [{
                                            name: 'Access From',
                                            type: 'pie',
                                            radius: ['40%', '70%'],
                                            avoidLabelOverlap: false,
                                            label: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {
                                                label: {
                                                    show: true,
                                                    fontSize: '18',
                                                    fontWeight: 'bold'
                                                }
                                            },
                                            labelLine: {
                                                show: false
                                            },
                                            data: [{
                                                value: 1048,
                                                name: 'Search Engine'
                                            },
                                            {
                                                value: 735,
                                                name: 'Direct'
                                            },
                                            {
                                                value: 580,
                                                name: 'Email'
                                            },
                                            {
                                                value: 484,
                                                name: 'Union Ads'
                                            },
                                            {
                                                value: 300,
                                                name: 'Video Ads'
                                            }
                                            ]
                                        }]
                                    });
                                });
                            </script>

                        </div>
                    </div><!-- End Website Traffic -->

                    <!-- News & Updates Traffic -->
                    <div class="card">
                        <div class="filter">
                            <a class="icon" th:href="@{/libs/niceadmin/#}" data-bs-toggle="dropdown"><i
                                    class="bi bi-three-dots"></i></a>
                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                                <li class="dropdown-header text-start">
                                    <h6>Filter</h6>
                                </li>

                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">Today</a></li>
                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Month</a></li>
                                <li><a class="dropdown-item" th:href="@{/libs/niceadmin/#}">This Year</a></li>
                            </ul>
                        </div>

                        <div class="card-body pb-0">
                            <h5 class="card-title">News &amp; Updates <span>| Today</span></h5>

                            <div class="news">
                                <div class="post-item clearfix">
                                    <img th:src="@{/libs/niceadmin/assets/img/news-1.jpg}" alt="">
                                    <h4><a th:href="@{/libs/niceadmin/#}">Nihil blanditiis at in nihil autem</a></h4>
                                    <p>Sit recusandae non aspernatur laboriosam. Quia enim eligendi sed ut harum...</p>
                                </div>

                                <div class="post-item clearfix">
                                    <img th:src="@{/libs/niceadmin/assets/img/news-2.jpg}" alt="">
                                    <h4><a th:href="@{/libs/niceadmin/#}">Quidem autem et impedit</a></h4>
                                    <p>Illo nemo neque maiores vitae officiis cum eum turos elan dries werona nande...
                                    </p>
                                </div>

                                <div class="post-item clearfix">
                                    <img th:src="@{/libs/niceadmin/assets/img/news-3.jpg}" alt="">
                                    <h4><a th:href="@{/libs/niceadmin/#}">Id quia et et ut maxime similique occaecati
                                            ut</a></h4>
                                    <p>Fugiat voluptas vero eaque accusantium eos. Consequuntur sed ipsam et totam...
                                    </p>
                                </div>

                                <div class="post-item clearfix">
                                    <img th:src="@{/libs/niceadmin/assets/img/news-4.jpg}" alt="">
                                    <h4><a th:href="@{/libs/niceadmin/#}">Laborum corporis quo dara net para</a></h4>
                                    <p>Qui enim quia optio. Eligendi aut asperiores enim repellendusvel rerum cuder...
                                    </p>
                                </div>

                                <div class="post-item clearfix">
                                    <img th:src="@{/libs/niceadmin/assets/img/news-5.jpg}" alt="">
                                    <h4><a th:href="@{/libs/niceadmin/#}">Et dolores corrupti quae illo quod dolor</a>
                                    </h4>
                                    <p>Odit ut eveniet modi reiciendis. Atque cupiditate libero beatae dignissimos
                                        eius...</p>
                                </div>

                            </div><!-- End sidebar recent posts-->

                        </div>
                    </div><!-- End News & Updates -->

                </div><!-- End Right side columns -->

            </div>
        </section>

    </main><!-- End #main -->

    <!-- ======= Footer ======= -->
    <footer id="footer" class="footer" th:fragment="footer">
        <div class="copyright">
            Copyright &copy; 2022.Company name All rights reserved.>
        </div>
        <div class="credits">
            <!-- All the links in the footer should remain intact. -->
            <!-- You can delete the links only if you purchased the pro version. -->



        </div>
    </footer><!-- End Footer -->

    <a th:href="@{/libs/niceadmin/#}" class="back-to-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <!-- Vendor JS Files -->
    <script th:src="@{/libs/jquery/jquery-3.5.1.js}"></script>
    <script th:src="@{/libs/niceadmin/assets/vendor/apexcharts/apexcharts.min.js}"></script>
    <script th:src="@{/libs/niceadmin/assets/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/libs/niceadmin/assets/vendor/chart.js/chart.min.js}"></script>
    <script th:src="@{/libs/niceadmin/assets/vendor/echarts/echarts.min.js}"></script>
    <script th:src="@{/libs/niceadmin/assets/vendor/quill/quill.min.js}"></script>
    <script th:src="@{/libs/niceadmin/assets/vendor/simple-datatables/simple-datatables.js}"></script>
    <script th:src="@{/libs/niceadmin/assets/vendor/tinymce/tinymce.min.js}"></script>
    <script th:src="@{/libs/niceadmin/assets/vendor/php-email-form/validate.js}"></script>

    <!-- Template Main JS File -->
    <script th:src="@{/libs/niceadmin/assets/js/main.js}"></script>

</body>

</html>